@import '../variables/default.scss';
@import '../mixins/index.scss';

$empty-prefix-cls: '.at-empty';

#{$empty-prefix-cls} {
  margin: 0 16px;
  font-size: $font-size-sml;
  text-align: center;

  &#{$empty-prefix-cls}-local {
    font-size: $font-size-slg;
  }

  &-image {
    image,
    img,
    .taro-img {
      width: $empty-image-width;
      height: $empty-image-height;

      image,
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  &-title {
    padding-top: 20px * $hd;
    color: $color-text-title;
    font-size: $font-size-lg;
  }

  &-description {
    padding-top: 12px * $hd;
  }

  &-footer {
    padding-top: 32px;
  }

  &-normal {
    padding: $empty-image-margin-top 0 64px;
    color: $color-grey-2;
  }

  &-small {
    padding: 16px 0;
    color: $color-grey-2;

    #{$empty-prefix-cls}-image {
      image,
      img,
      .taro-img {
        width: $empty-image-width-small;
        height: $empty-image-height-small;
      }
    }
  }
}
